<template>
	<view 
    class="scl-result-more-comp"
    style="padding-top: 20rpx;margin-top: 30rpx;"
    v-if="showAdsWrapper1 || showAdsWrapper2"
  >
		<view class="test-box" >
			<template v-if="showAdsWrapper1">
        <view class="test-same-box flex-vc">
          <image :src="test_same_tip" mode="" class="test-same-tip"></image>
          和您相同测评结果的人选择了以下测评
        </view>
        
        <view class="swiper-banner">
          <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000"
            :current="currentIndex"
            :circular="true" 
            indicator-color="#DEF8D7"
            indicator-active-color="#FFFEFE"
            previous-margin="26rpx"
            next-margin="26rpx"
            class="swiper-wrapper" 
            @change="swiperChange"
            >
            <swiper-item class="swiper-item-box" v-for="(item,index) in dataItemList" :key="index">
              <view class="swiper-item" :style="{'opacity':currentIndex == index ? '1' : '0.5','transform': currentIndex == index ? 'none' : 'scaleY(0.86)'}"
                @click="itemClick(item)"
              >
                <view class="top-box">
                  <view class="cover-img">
                    <image :src="item.detailImg" class="img" mode="aspectFill"></image>
                  </view>
                  <view class="tit-box">
                    {{item.sclName||item.scl_name}}
                  </view>
                  <div class="intro-box">
                    {{(item.summary||item.nickName)?(item.summary||item.nickName):'暂无'}}
                  </div>
                </view>
                <view class="bot-box">
                  <view class="btn-box" >
                    去测试
                  </view>
                  <view class="use-count-num-wrapper">
                    <view class="tbiip-count" >
                      <image class="tbii-ic-count" :src="teamIcon" mode="">
                      </image>{{item.collectNums}}次
                    </view>  
                  </view>
                </view>
                <image v-if="currentIndex == index" :src="test_recommend" class="si-recommend" mode=""></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </template>
      <view style="width: 644rpx;margin: 0 auto;margin-top: 30rpx;" v-if="showAdsWrapper2">
				<scl-list :dataList="dataList"></scl-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
    getResultPageRecommendScl
	} from '@/common/api/scl_api.js'
	import sclList from '@/components/scl-list/scl-list.vue'
  import {mapState} from 'vuex'
  import {calculateDiscountedPrice} from '@/common/utils/util.js'
  
	export default {
		components: {
			sclList
		},
    props:{
      showAdsWrapper1:{
        type:Boolean,
        default:true
      },
      showAdsWrapper2:{
        type:Boolean,
        default:true
      },
      group:{
        type:String,
        default:"A"
      },
      sclId:{
        type:String,
        default:""
      },
    },
		data() {
			return {
				dataItemList: null,
				dataList: null,
				test_same_tip: this.imgBaseURL + '/sclResult/test_same_tip.png',
				test_recommend: this.imgBaseURL + '/sclResult/test_recommend.png',
        staticImgs:{
          activityImg: this.imgBaseURL + '/scl/scl_activity_B.png',
        },
        currentIndex:0,
        teamIcon:this.imgBaseURL + '/scl/team-icon-2.png',
			};
		},
    cmoputed:{
      ...mapState({
        activitySwitch:state=>state.app.activitySwitch,
      }),
    },
		mounted() {
      console.log('store：',this.$store)
			getResultPageRecommendScl({
        sclId:this.sclId,
        num:10
      }).then(res => {
        if(res){
          const tmpArr = []
          res.data.data.map(item=>{
            const tmpObj = JSON.parse(JSON.stringify(item))
            // tmpObj.discountedPrice = item.newOriginalPrice
            
            tmpObj.coverImg = tmpObj.coverImg || tmpObj.detailImg
            
            tmpArr.push(tmpObj)
          })
          this.dataItemList = tmpArr.slice(0,3)
          this.dataList = tmpArr.slice(3)
        }
			})
      
    },
		methods: {
      swiperChange(e){
        this.currentIndex = e.detail.current
      },

			itemClick(item) {
				if (item.reportId) {
					uni.navigateTo({
						url: '/subcontractorB/pages/sclResult/sclResult?reportId=' + item.reportId + '&sclId=' +
							item.scl_id
					})
				} else {
					uni.navigateTo({
						url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
							sclId: item.id
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url('scl-result-more.css');
  .scl-result-more-b{
    .test-same-box{
      color: #4841D0;
    }
    .swiper-banner{
      width: 642rpx;
      
    }
  }
  
  .swiper-wrapper{
    height: 472rpx !important;
  }
  .swiper-banner{
    height: 496rpx;
// background: linear-gradient(to right, #86F1FF, #997BFF);
    background: linear-gradient(to right, #EEFFCB, #8FE998);
    box-shadow: 0rpx 2rpx 10rpx 0rpx #97BE74;
    
    .swiper-item-box{
      // width: 584rpx !important;
      // width: 660rpx !important;
      height: 417rpx !important;
      
      // box-sizing: border-box;
      // padding: 0 6rpx;
      // position: relative;
      
      // background-color: #fff;
    }
    
    .swiper-item{
      width: 584rpx;
      height: 417rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 2rpx 12rpx 0rpx #9AC572;
      border-radius: 26rpx;
      box-sizing: border-box;
      padding: 20rpx 26rpx;
      padding-bottom: 16rpx;
      
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      
      .top-box{
        .cover-img{
          width: 532rpx;
          height: 240rpx;
              border-radius: 16rpx;
              overflow: hidden;
          
          .img{
            width: 100%;
            height: 100%;
          }
        }
        
        .tit-box{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #333435;
          line-height: 36rpx;
          // text-shadow: 0px 2px 20px #9AC572;
          text-align: left;
          font-style: normal;
          margin-top: 16rpx;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis; 
          width: 516rpx;
        }
        
        .intro-box{
          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          font-size: 24rpx;
          color: #666666;
          line-height: 36rpx;
          // text-shadow: 0px 2px 20px #9AC572;
          text-align: left;
          font-style: normal;
          
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis; 
          width: 516rpx;
        }
      }
      
      .bot-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-box{
          width: 130rpx;
          height: 50rpx;
          background: linear-gradient( 180deg, #A9EE87 0%, #70D669 100%);
          // box-shadow: 0rpx 2rpx 20rpx 0rpx #9AC572;
          border-radius: 25rpx;
          
          font-family: PingFang-SC, PingFang-SC;
          // font-weight: bold;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 37rpx;
          // text-shadow: 0px 2px 20px #9AC572;
          text-align: left;
          font-style: normal;
          
              box-sizing: border-box;
              line-height: 50rpx;
              text-align: center;
        }
      }
      
      .use-count-num-wrapper{
        display: flex;
        align-items: center;
        .tbii-ic-count{
          width: 62rpx;
          height: 62rpx;
          margin-right: -12rpx;
        }
        .tbiip-count{
          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          font-size: 26rpx;
          color: #666666;
          line-height: 36rpx;
          // text-shadow: 0px 2px 20px #9AC572;
          text-align: left;
          font-style: normal;
          
              display: flex;
              align-items: center;
              line-height: 62rpx;
        }
      }
      
      
    }
  }
  
  .test-box{
    // background: #F1FEFF;
    // box-shadow: 0rpx 2rpx 20rpx 0rpx #C6EFF2;
    // border-radius: 26rpx;
    // background: #FCFFF9;
    // box-shadow: 0rpx 2rpx 20rpx 0rpx #E4EFDF;
    border-radius: 26rpx;
  }
  .activity-box{
    margin: auto;
    box-sizing: border-box;
    // padding-top: 22rpx;
    display: flex;
    justify-content: center;
    margin-top: 28rpx;
    margin-bottom: 28rpx;
    image{
      width: 644rpx;
      height: 240rpx;
      margin: auto;  
      background: #D8D8D8;
      border-radius: 26rpx;
    }
  }
  
  
  
</style>